import React, { memo, useState} from 'react';
import { SearchLyricWrapper,RowWrapper } from './style';
import usePlayMusic from '@/hooks/usePlayMusic'
import useShowDetail from '@/hooks/useShowDetail'
import useShowArtistDetail from '@/hooks/useShowArtistDetail'
import useShowAlbumDetail from '@/hooks/useShowAlbumDetail'
import {formatDuration} from '@/utils/format'
export default memo(function SearchLyric(props) {
  
  const { list } = props
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isShow, setIsShow] = useState(false);
  const playMusic = usePlayMusic()
  const goToSongDetail = useShowDetail()
  const goToArtistDetail = useShowArtistDetail()
  const goToAlbumDetail = useShowAlbumDetail()
  const changeShow = index => {
    setCurrentIndex(index)
    setIsShow(!isShow)
  }
  
  
  return (
    <SearchLyricWrapper>
      {
        list.map((item,index) => {
          return (
            <RowWrapper className="item" key={item.id} isShow={index === currentIndex && isShow}>
              <div className="row" key={item.id}>
                <div className="play sprite_table" onClick={e => playMusic(item.id)}></div>
                <div className="name" onClick={e => goToSongDetail(item.id)}>{item.name}</div>
                <div className="artist text-nowrap" onClick={e => goToArtistDetail(item.artists[0].id)}>{item.artists[0].name}</div>
                <div className="album text-nowrap" onClick={e => goToAlbumDetail(item.album.id)}>《{item.album.name}》</div>
                <div className="dt">{formatDuration(item.duration)}</div>
              </div>
              <p className='txt'>{item.lyrics?.txt}</p>
              <div className="show" onClick={e => changeShow(index)}>{currentIndex === index && isShow ? '收起' : '展开'}</div>
           </RowWrapper>
          )
        })
      }
    </SearchLyricWrapper>
  )
});
